oa.view.rf.sizeComparison = {
/**
 * Render the structure of a sizeComparison
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblemList} ap  A List of arithmetic problems.
 */
render: function(ap) {
  var el = {};
  var btnWrapper;
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("sizeComparison");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);
  var top = dom.createDiv("topBox", "topBox"),
      bottom = dom.createDiv("bottomBox");
  
  el = dom.createDiv(null, "largeBox");
  el.appendChild(top);
  el.appendChild(bottom);
  apDivEl.appendChild(el);
  
  // create upper and lower boxes
  oa.view.fillLargeBoxes(ap);
    
  // configure the submit/continue button
  el = dom.createButton("submitButton", "blue", "?");
  el.addEventListener("click", oa.view.handleSizeComparisonSubmit, false);
  
  btnWrapper = dom.createDiv(null, "buttonRight");
  btnWrapper.appendChild( el);
  apDivEl.appendChild( btnWrapper);

  document.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
},
/**
 * Fill an already rendered problem equation with new values for operands
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblem}
 *            ap An arithmetic problem.
 */
fill: function(ap) {

  // fill in the operands
  for ( var i = 0; i <= ap.operands.length - 1; i++) {
    var op = ap.operands[i];
    
    if (ap.type.numberType != NumberTypeEL.Fraction) {
      // numbers
      document.getElementById("natural" +i).innerHTML = op;
      
    } else {
      // fractions
      document.getElementById("numerator" +i).innerHTML = op[0];
      document.getElementById("denominator" +i).innerHTML = op[1];
    }
  }
}
};

oa.view.fillLargeBoxes = function(ap, swap) {
  var el;
  var top = document.getElementById("topBox");
  var bottom = document.getElementById("bottomBox");
  
  // remove previous sizeBoxes
  while (top.children.length > 0)
    top.removeChild(top.children[0]);
  while (bottom.children.length > 0)
    bottom.removeChild(bottom.children[0]);
  
  // upper destination-divs
  el = dom.createDiv(null, "endBox");
  oa.view.makeEmptyDummy(el, "kleinste Zahl");
  top.appendChild(el);
  for (var i = 0; i < ap.type.numberRanges.length -1; i++ ) {
    el = dom.createDiv("sizeBox" + i, "sizeBox");
    if (swap)
      el.appendChild(oa.view.createBox(i, ap));
   else {
      oa.view.makeDropZone(el, true); // make it a place to drop
      oa.view.makeEmptyDummy(el);
    }
    top.appendChild(el);
  }
  el = dom.createDiv(null, "endBox");
  oa.view.makeEmptyDummy(el, "gr\u00f6\u00dfte Zahl");
  top.appendChild(el);
  
  // lower source-divs
  for (var i = 0; i < ap.type.numberRanges.length -1; i++ ) {
    el = dom.createDiv(null, "sizeBox");
    if (swap) {
      oa.view.makeDropZone(el, true); // make it a place to drop
      oa.view.makeEmptyDummy(el);
    } else
      el.appendChild(oa.view.createBox(i, ap));
    bottom.appendChild(el);
  }
};

oa.view.makeEmptyDummy = function(el, content) {
  var elDiv = dom.createDiv();
  if (content != null)
    elDiv.innerHTML = content;
  else
    elDiv.innerHTML = "&nbsp;";
  el.appendChild(elDiv);
};

oa.view.makeDropZone = function(el, cond) {
  if (cond) {
    el.addEventListener("dragover", oa.view.handleSizeComparisonDragOver, false); // activate dropping
    el.addEventListener("drop", oa.view.handleSizeComparisonDrop, false); // drop-id
    el.addEventListener("dragenter", oa.view.handleSizeComparisonDragIn, false); // gray
    el.addEventListener("dragleave", oa.view.handleSizeComparisonDragOut, false); //not gray
  } else {
    el.removeEventListener("dragover", oa.view.handleSizeComparisonDragOver, false);
    el.removeEventListener("drop", oa.view.handleSizeComparisonDrop, false);
    el.removeEventListener("dragenter", oa.view.handleSizeComparisonDragIn, false);
    el.removeEventListener("dragleave", oa.view.handleSizeComparisonDragOut, false);
  }
};

oa.view.createBox = function(id, ap) {
  var box = dom.createDiv(), 
      el = null;
    
  if (ap.type.numberType != NumberTypeEL.Fraction) {
    box.setAttribute("id", "natural" + id);
    box.setAttribute("name", "natural");

  } else { // fraction
  box.setAttribute("class", "fraction");

    // numerator
    el = dom.createSpan("numerator" + id, "operand");
    el.setAttribute("name", "numerator");
    box.appendChild(el);

    // slash
    el = document.createElement("hr");
    el.setAttribute("class", "slash");
    box.appendChild(el);

    // denominator
    el = dom.createSpan("denominator" + id, "operand");
    el.setAttribute("name", "denominator");
    box.appendChild(el);
  }
  
  el = dom.createDiv("drag" + id, "filled");
  el.setAttribute("draggable", "true");
  el.addEventListener("dragstart", oa.view.handleSizeComparisonDragStart, false); // id, transparent
  el.addEventListener("dragend", oa.view.handleSizeComparisonDragEnd, false); // remove transparent
  el.addEventListener("mousedown", oa.view.handleUserInputSizeComparison, false); // remove green/red borders
  el.appendChild(box);
  return el;
};

oa.view.handleSizeComparisonDragStart = function(e) {
  e.target.style.opacity = "0.2";
  e.dataTransfer.setData("text", e.target.id);
};

oa.view.handleSizeComparisonDragEnd = function(e) {
  e.target.style.opacity = "1";
};

oa.view.handleSizeComparisonDragOver = function(e) {
  if (e.target.parentNode.classList.contains("sizeBox"))
    e.preventDefault(); // enable dropping instead of default-browser-behavior
};

oa.view.handleSizeComparisonDrop = function(e) {
  var id;
  var source, destination;
  // reset the destination - background
  e.target.parentNode.style.background = null;
  
  e.preventDefault();
  e.stopPropagation(); // stop redirecting.
  id = e.dataTransfer.getData("text");

  // get the source-parent
  source = document.getElementById(id).parentNode, // remember the size box to make it a drop-zone
  destination = e.target.parentNode; // parentNode to avoid getting the empty div
  
  destination.appendChild(document.getElementById(id));
  destination.removeChild(e.target); //remove empty-div
  oa.view.makeDropZone(destination, false);
  
  // set up the new empty box
  oa.view.makeDropZone(source, true);
  oa.view.makeEmptyDummy(source);
};

oa.view.handleSizeComparisonDragIn = function(e) {
  if (e.target.parentNode.classList.contains("sizeBox"))
    e.target.parentNode.style.background = "#eee";
};

oa.view.handleSizeComparisonDragOut = function(e) {
  e.target.parentNode.style.background = null;
};

/**
 * Event handler for clicking the "Enter"/"Continue" button
 */
oa.view.handleSizeComparisonSubmit = function(e) {
  var boxn = [],
      answer = [];
      count = oa.currentProblem.type.numberRanges.length -1,
      correction = [],
      check = true,
      correctOrder = [];
  
  // get the divs
  for (var i = 0; i < count; i++ )
    boxn.push(document.getElementById("sizeBox" + i));
  
  // check if already solved
  if (e.target.innerHTML != "?") {  // click continue event
    for (var i = 0; i < count; i++ )
      boxn[i].children[0].classList.remove("correct");
    e.target.innerHTML = "?";
    oa.view.fillLargeBoxes(oa.currentProblem);
    oa.ctrl.continueCurrentExercise();
  }
  else {
    answer = [];
    for (var i = 0; i < count; i++ )
      if (oa.currentProblem.type.numberType == NumberTypeEL.Fraction) {
        if (boxn[i].children[0].children.length > 0) { // check if destination box is not empty
          var num = parseInt(boxn[i].children[0].children[0].children[0].innerHTML);
          var denom = parseInt(boxn[i].children[0].children[0].children[2].innerHTML);
          answer.push([num, denom]);
        } else {
          answer.push([null, null]); // null to get false case in evaluateSizeComparison
          check = false;
        }
      } else {
        if (boxn[i].children[0].children.length > 0)
          answer.push(parseInt(boxn[i].children[0].children[0].innerHTML));
        else {
          answer.push(null); // null to get false case in evaluateSizeComparison
          check = false;
        }
      }
    
    // get false inputs
    correction = oa.ctrl.rf.sizeComparison.evaluate( answer);
    if (check) { // all dropzones filled
      if (correction.length == 0) {
        for (var i = 0; i < count; i++ )
          boxn[i].children[0].classList.add("correct");
        e.target.innerHTML = "►";
      }
      else {
        for (var i = 0; i < correction.length; i++ )
          boxn[correction[i]].children[0].classList.add("false");
      }
    } else { // at least one field was not filled -> show the correct answer
      oa.view.fillLargeBoxes(oa.currentProblem, true); // reset the rf with all number-containers in the topBox
      correctOrder = oa.ctrl.rf.sizeComparison.getSortedNumbers(); // get the correct answer
      oa.currentProblem.setOperands(correctOrder);
      oa.view.rf.sizeComparison.fill(oa.currentProblem); // fill in the correct ordered numbers
      
      // add color borders
      for (var i = 0; i < correctOrder.length; i++)
        if (correction.hasElem(i))
          document.getElementById("drag" + i).classList.add("given");
        else
          document.getElementById("drag" + i).classList.add("correct");
      e.target.innerHTML = "►";
    }
  }
};

Array.prototype.hasElem = function(elem) {
  for (i in this)
    if (elem == this[i])
      return true;
  return false;
};

/**
 * Event handler for reseting the input field's class value on new user input 
 */
oa.view.handleUserInputSizeComparison = function(e) {
  for (var i = 0; i < oa.currentProblem.type.numberRanges.length -1; i++ ) {
    var box = document.getElementById("sizeBox" + i);
    box.children[0].classList.remove("correct");
    box.children[0].classList.remove("false");
  }
};